<template>
    <div class="container">
        <div class="item-header">
            <div class="item-left" :style="{backgroundImage: 'url(' + list.imgUrl + ')'}"></div> 
            <div class="item-right">
                <p class="item-right__title">{{list.title}}</p>
                <p class="item-right__common">{{list.time}}</p>
                <p class="item-right__common">状态：<em :style="{color: list.status === 1?'#ff721f' : '#999999'}">{{list.status === 0?'未开始' : list.status===1?'进行中':'已结束'}}</em></p>
            </div>
        </div>

        <div class="comment-box">
            <div class="comment-box__title">
                <svg class="icon" aria-hidden="true" style="width: .4rem;height:.4rem">
                    <use xlink:href="#icon-gift_icon"></use>
                </svg>
                成功评价可获10狗币奖励
                
            </div>
            <div class="comment-box__range">
                <div class="comment-box__item margin-bottom">
                    <span class="comment-box__itemName">总体评价</span>
                    <rater v-model="dataTotal" star="✩" active-color="red" :margin="5" :disabled="inputLock"></rater>
                </div>
                <div class="comment-box__item margin-bottom">
                    <span class="comment-box__itemName">活动氛围</span>
                    <rater v-model="dataAtmosphere" star="✩" active-color="red" :margin="5" :disabled="inputLock"></rater>
                </div>
                <div class="comment-box__item">
                    <span class="comment-box__itemName">活动环境</span>
                    <rater v-model="dataEnvironment" star="✩" active-color="red" :margin="5" :disabled="inputLock"></rater>
                </div>
            </div>
            <div class="comment-box__comment">
                <x-textarea 
                    :max="50" 
                    placeholder="随便写点什么" 
                    :show-counter="false"
                    v-model="dataText"
                    :readonly="inputLock"
                >
                </x-textarea>
            </div>

        </div>
        <comment-bottom></comment-bottom>
        <div class="comment-lists" v-if="inputLock">
            <comment-item v-for="item of testComment" :key="item.id" :dataText="item.dataText" :replyText="item.replyText"></comment-item>
        </div>
        <comment-button
            @commitcomment="getData"
            v-if="!inputLock"
        ></comment-button>
        <common-alert
            cancelLink="/"
            nextLink="/"
            :showHideOnBlur="showHideOnBlur"
        >
            <p style="font-size: .4rem;color:#ff721f; text-align: center;margin:.3rem 0">添加评论成功</p>
            <p style="font-size: .2rem;color:#aaaaaa; text-align: center;margin:.3rem 0">点击确定查看评价，取消返回活动首页</p>
        </common-alert>
    </div>
</template>

<script>
import { Rater, XTextarea,XButton,Box  } from 'vux'
import CommentBottom from './components/bottom'
import commentButton from './components/button'
import commentItem from './components/item'
import CommonAlert from '@/common/Alert/alert.vue'
import { mapState, mapMutations } from 'vuex'
export default {
    name: 'Comment',
    created () {
        //先发数据后台查看用户是否已经评论
        //判断依据 用户是否在这个活动评论过 一下是模拟数据
        if(this.testComment.user001 != null && this.testComment.user001.actid == this.$route.params.id) {
            this.inputLock = true
            this.dataTotal = this.testComment.user001.dataTotal
            this.dataEnvironment = this.testComment.user001.dataEnvironment
            this.dataAtmosphere = this.testComment.user001.dataAtmosphere
            this.dataText = this.testComment.user001.dataText

        }
    },
    components: {
        Rater,
        XTextarea,
        XButton,
        Box,
        CommentBottom,
        commentButton,
        CommonAlert,
        commentItem
    },
    computed: {
        ...mapState({
            testComment: 'testComment'
        })
    },
    data () {
        return {
            list: {
                id: 0,
                imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg',
                title: '6.20走进中山大学创新创业学院资源对接会',
                time: '2018-06-25 14:00',
                status: 2, //0:未开始 1:进行中 2:已结束
                hadComment: 0 //0为评论 1为已评论
            },
            dataTotal: 1,
            dataEnvironment: 1,
            dataAtmosphere: 1,
            dataText: '',
            showHideOnBlur: false,
            inputLock: false
        }
    },
    methods: {
        getData () {
            if(this.dataText == '') {
                alert('先写点什么吧')
                return false
            }else{
                this.showHideOnBlur = true
            }
            

        }
    }
}
</script>

<style lang="stylus" scoped>
.comment-box__comment >>> .weui-textarea
    background: #f2f2f2
    padding: .20rem
    box-sizing: border-box
    border-radius: .1rem
.comment-box__comment >>> .weui-cell
    padding: 0 0;
.container
    width: 100%
    background-color: #fbf9fe
    overflow: hidden
    .item-header
        box-sizing: border-box
        padding: .3rem .54rem .3rem .3rem
        overflow: hidden
        display: flex
        background: #fff
        margin-bottom: .2rem
        .item-left
            width: 2.7rem
            height: 1.8rem
            overflow:hidden
            background-position: center center
            background-repeat: no-repeat
            -webkit-background-size:cover
            -moz-background-size:cover
            background-size:cover
            margin-right: .3rem
        .item-right
            flex: 1
            position: relative
            .item-right__title
                margin-top: .20rem
                font-size: .30rem
                line-height: .35rem
                font-weight: 600
            .item-right__common
                font-size: .2rem
                margin-top: .16rem
                color: #999999
    .comment-box
        background: #fff
        padding-bottom: .5rem
        margin-bottom: .2rem
        .comment-box__title
            padding: .3rem .3rem 0
            box-border: border-box
            font-size: .3rem
            color: #999
        .comment-box__range
            padding: .5rem 1.10rem
            .comment-box__item
                .comment-box__itemName
                    color: #999999
                    font-size: .33rem
                    margin-right: .70rem
            .margin-bottom
                margin-bottom: .70rem   
        .comment-box__comment
            padding: 0 .20rem      
            .comment-box__commentButton
                margin: .40rem .20rem
    .comment-lists
        background: #fff
        padding: .2rem .2rem .5rem

</style>


